<template>
  <div>
    <h2 class="form-title">登录账户</h2>
    <p class="form-subtitle">请使用您的账户信息登录靶场平台</p>

    <form @submit.prevent="$emit('submit', formData)">
      <div class="form-group">
        <i class="fas fa-user"></i>
        <input
            type="email"
            class="form-control"
            placeholder="邮箱地址"
            v-model="formData.email"
            @blur="$emit('validate', { name: 'email', value: formData.email })"
        >
        <span class="error" v-if="errors.email">{{ errors.email }}</span>
      </div>

      <div class="form-group">
        <i class="fas fa-lock"></i>
        <input
            type="password"
            class="form-control"
            placeholder="密码"
            v-model="formData.password"
            @blur="$emit('validate', { name: 'password', value: formData.password })"
        >
        <span class="error" v-if="errors.password">{{ errors.password }}</span>
      </div>

      <div class="form-group captcha-group">
        <i class="fas fa-shield-alt"></i>
        <input
            type="text"
            class="form-control"
            placeholder="验证码"
            v-model="formData.captcha"
            @blur="$emit('validate', { name: 'captcha', value: formData.captcha })"
        >
        <canvas 
            ref="captchaCanvas" 
            class="captcha-canvas" 
            @click="refreshCaptcha"
            title="点击刷新验证码">
        </canvas>
        <span class="error" v-if="errors.captcha">{{ errors.captcha }}</span>
      </div>

      <div class="remember-forgot">
        <div class="remember">
          <input type="checkbox" id="remember" v-model="formData.remember">
          <label for="remember">记住我</label>
        </div>
        <a href="#" class="forgot-password">忘记密码? 联系客服</a>
      </div>

      <button type="submit" class="btn">
        <i class="fas fa-sign-in-alt"></i> 登录靶场平台
      </button>
      <p class="security-note">* 客服电话: 400-6059-110</p>
    </form>
  </div>
</template>

<script>
export default {
  props: {
    errors: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      formData: {
        email: '',
        password: '',
        captcha: '',
        remember: false
      },
      captchaCode: ''
    }
  },
  mounted() {
    this.generateCaptcha();
  },
  methods: {
    // 生成图形验证码
    generateCaptcha() {
      // 从 localStorage 获取验证码
      const storedCaptcha = localStorage.getItem('loginCaptcha');
      if (storedCaptcha) {
        this.captchaCode = storedCaptcha;
        this.drawCaptcha();
      }
    },
    
    // 绘制验证码到 canvas
    drawCaptcha() {
      const canvas = this.$refs.captchaCanvas;
      if (!canvas) return;
      
      const ctx = canvas.getContext('2d');
      canvas.width = 100;
      canvas.height = 38;
      
      // 清空画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // 绘制背景
      ctx.fillStyle = '#f0f0f0';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      
      // 绘制干扰线
      for (let i = 0; i < 5; i++) {
        ctx.strokeStyle = this.getRandomColor();
        ctx.beginPath();
        ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
        ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
        ctx.stroke();
      }
      
      // 绘制验证码
      ctx.font = '20px Arial';
      ctx.fillStyle = '#333';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      
      // 在验证码字符之间添加空隙
      const chars = this.captchaCode.split('');
      const spacing = canvas.width / (chars.length + 1);
      
      for (let i = 0; i < chars.length; i++) {
        // 随机旋转角度
        const angle = (Math.random() * 0.4 - 0.2);
        ctx.save();
        ctx.translate(spacing * (i + 1), canvas.height / 2);
        ctx.rotate(angle);
        ctx.fillText(chars[i], 0, 0);
        ctx.restore();
      }
      
      // 绘制干扰点
      for (let i = 0; i < 20; i++) {
        ctx.fillStyle = this.getRandomColor();
        ctx.beginPath();
        ctx.arc(
          Math.random() * canvas.width,
          Math.random() * canvas.height,
          1,
          0,
          Math.PI * 2
        );
        ctx.fill();
      }
    },
    
    // 获取随机颜色
    getRandomColor() {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    },
    
    // 刷新验证码
    refreshCaptcha() {
      // 触发父组件重新生成验证码
      this.$parent.generateCaptcha();
      // 重新获取并绘制验证码
      this.$nextTick(() => {
        this.generateCaptcha();
      });
    }
  },
  watch: {
    // 监听父组件验证码变化
    '$parent.captchaCode': {
      handler() {
        this.generateCaptcha();
      }
    }
  }
}
</script>

<style scoped lang="css" src="@/assets/styles/login.css">
/* 空样式，仅用于作用域 */
</style>

<style scoped>
.captcha-group {
  position: relative;
}

.captcha-canvas {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 100px;
  height: 38px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  background: #f9f9f9;
}
</style>